<template>
  <div style="height: 73vh">
    <el-container>
      <el-main>
        <div style="margin: 0 0 0 10px">
          <el-form
            :inline="true"
            :model="dataForm"
            @keyup.enter.native="getDataList()"
            class="form-inline"
          >
            <el-form-item label="分配部门部门名称">
              <el-input
                v-model="dataForm.fpDeptName"
                placeholder="部门名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="人员名称">
              <el-input
                v-model="dataForm.ryName"
                placeholder="人员名称"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                icon="el-icon-search"
                type="primary"
                class="marginLeft"
                @click="getDataList()"
                plain
                >检索</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button
                size="small"
                icon="el-icon-plus"
                @click="addOrUpdateHandle()"
                type="primary"
                >新增</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-table
            :data="dataList"
            v-loading="dataListLoading"
            class="avue-crud"
            height="53vh"
            :key="isKey"
            :row-style="changeStyle"
            @row-dblclick="rowDblclick"
          >
            <el-table-column
              prop=""
              label="序号"
              :formatter="nShowIndex"
              width="70"
            ></el-table-column>
            <el-table-column
              prop="fpDeptName"
              label="分配部门名称"
              width=""
            ></el-table-column>
            <el-table-column
              prop="ryName"
              label="人员名称"
              width="120px"
            ></el-table-column>
            <el-table-column
              prop="ryCode"
              label="人员编号"
              width="100px"
            ></el-table-column>
            <el-table-column
              prop="deptName"
              label="部门名称"
              width="200px"
            ></el-table-column>
            <el-table-column
              prop="jjxMc"
              label="奖金项名称"
              width="130px"
            >
              <template slot-scope="scope">
                <el-select v-if="rowId==scope.row.id" @change="changeUp(scope.row)" v-model="scope.row.jjxId">
                  <el-option v-for="item in jjxOptions"
                             :key="index"
                             :label="item.jjxMc"
                             :value="item.jjxId">
                  </el-option>
                </el-select>
                <span v-else>{{scope.row.jjxMc}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="jjJe"
              label="奖金金额(元)"
              :formatter="nFormatterShow"
              width="150px"
            >
              <template slot-scope="scope">
                <el-input-number v-if="rowId==scope.row.id" @change="changeUp(scope.row)" v-model="scope.row.jjJe"></el-input-number>
                <span v-else>{{ $formatNum(scope.row.jjJe) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="jjSm" label="奖金说明"></el-table-column>
            <el-table-column
              label="操作"
              width="200px"
              header-align="center"
              align="center"
            >
              <template slot-scope="scope">
<!--                <el-button-->
<!--                  size="small"-->
<!--                  icon="el-icon-edit"-->
<!--                  @click="addOrUpdateHandle(scope.row)"-->
<!--                  >修改</el-button-->
<!--                >-->
                <el-button
                  v-if="scope.row.loginUserId == scope.row.createUserId"
                  type="danger"
                  plain
                  icon="el-icon-delete"
                  @click="deleteHandle(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="avue-crud__pagination">
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            background
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
        </div>
      </el-main>
    </el-container>
    <!--奖金分配个人定项表-->
    <fpDxfpForm ref="fpDxfpForm" @refreshDataList="getDataList"></fpDxfpForm>
  </div>
</template>

<script>
import fpDxfpForm from "./jiangjinfpjjfpdjb-fp-dxfp-form";
import { fetchList, delObj,updateById } from "@/api/jiangjin/jiangjinfpjjfpgrdxb";
import { getJiangJinBm } from "@/api/admin/dept";
import { getObj, putObj } from "@/api/jiangjin/jiangjinfpjjfpdjb";

export default {
  name: "jiangjinfpjjfpdjb-fp-dxfp",
  components: {
    fpDxfpForm,
  },
  data() {
    return {
      dataForm: {
        fpDeptName: "",
        ryName: "",
        fpId: "",
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,

      jjfpId: "", //奖金分配ID
      deptId: "", //负责部门ID
      deptName: "", //负责部门名称
      //主表记录
      jjfpdjb: [],
      rows: {},
      rowId:"",
      jjxOptions:[],
      surplusValue:0,
      isKey:true
    };
  },
  methods: {
    init(row) {
      this.rows = row;
      this.jjfpId = row.id;
      this.dataForm.fpId = row.id;
      this.dataForm.fpPid = row.pid;

      //取得主表(删除用)
      getObj(row.id).then((response) => {
        this.jjfpdjb = [];
        this.jjfpdjb = response.data.data;
        this.deptId = response.data.data.jjDeptId;
        this.deptName = response.data.data.jjDeptName;
        const xData = JSON.parse( this.jjfpdjb.detailJson);
        this.jjxOptions = [];
        this.jjxOptions = xData;
      });
      this.getDataList();
    },
    rowDblclick(row){
      this.rowId=row.id
      this.surplusValue=row.jjJe*1
    },
    changeUp(row){
      this.jjxOptions.forEach(item=>{
        if(row.jjxId==item.jjxId){
          this.$set(row,'jjxMc',item.jjxMc)
        }
      })
      if(row.jjJe*1>this.surplusValue*1){
        this.$message.closeAll()
        this.$message.warning('金额不能超过剩余金额!')
        this.$set(row,'jjJe',this.surplusValue*1)
        this.isKey=!this.isKey
        this.$forceUpdate()
        return false
      }
      updateById(row).then(res=>{
        if(res.data.code==0){
          this.$message.closeAll()
          this.$message.success('保存成功!')
          this.getDataList();
          this.rowId=""
        }
      })
    },
    getDataList() {
      this.dataListLoading = true;
      fetchList(
        Object.assign(
          {
            current: this.pageIndex,
            size: this.pageSize,
          },
          this.dataForm
        )
      )
        .then((response) => {
          this.dataList = response.data.data.records;
          this.dataList.forEach((ele) => {
            ele.fpDeptName = this.rows.jjDeptName;
          });
          this.totalPage = response.data.data.total;
          this.dataListLoading = false;
        })
        .catch((res) => {
          this.dataListLoading = false;
        });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    nShowIndex(row, column, cellValue, index) {
      return index + 1;
    },
    //列显示重新定义
    nFormatterShow(row, column, cellValue, index) {
      if (cellValue) {
        return cellValue.toFixed(2);
      } else {
        return cellValue;
      }
    },
    // 新增 / 修改
    addOrUpdateHandle(row) {
      this.$nextTick(() => {
        this.$refs.fpDxfpForm.init(
          this.jjfpId,
          this.deptId,
          row
        );
      });
    },
    //设置字段
    setColumns(_this, row) {
      const strJjXq = JSON.parse(this.jjfpdjb.jjxJeXq);
      const objJjXq = strJjXq[row.jjxId];

      _this.$set(objJjXq, "dxFp", objJjXq["dxFp"] - row.jjJe);
      _this.$set(objJjXq, "jjYe", objJjXq["jjYe"] + row.jjJe);

      _this.jjfpdjb.jjxJeXq = JSON.stringify(strJjXq);

      _this.$set(_this.jjfpdjb, "dxFp", _this.jjfpdjb["dxFp"] - row.jjJe);
      _this.$set(_this.jjfpdjb, "jjYe", _this.jjfpdjb.jjYe + row.jjJe);
    },
    // 删除
    deleteHandle(row) {
      const _this = this;

      this.$confirm("是否确认删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(function () {
        _this.setColumns(_this, row);

        delObj(row.id).then((data) => {
          putObj(_this.jjfpdjb).then((res) => {
            _this.$notify.closeAll();
            _this.$notify.success("删除成功");
            _this.getDataList();
          });
        });
      });
    },
    changeStyle(row, column, rowIndex, columnIndex) {
      if (row.row.loginUserId != row.row.createUserId) {
        return "color:red";
      }
    },
  },
};
</script>



<style scoped>
</style>
